<template>
   <div class="">
        <div class="header">
               <img src="@/assets/header-bg.jpg" alt="">
               <div class="icon-area">
                   <div class="icon-item search-icon"><img src="@/assets/image/supply/search-icon.png" alt=""></div>
                   <div class="icon-item user-icon"><img src="@/assets/image/supply/user-icon.png" alt=""></div>
                   <div class="icon-item menu-icon"><img src="@/assets/image/supply/menu-icon.png" alt=""></div>
               </div>
               <div class="tab-area">
                   <div class="tab-area-container">
                       <a href="" class="tab-area-item">
                       <span class="main">爆款好货</span>
                       <span class="detail">正规渠道 一网总览 严把品质</span>
                   </a>
                   <div class="breakline"></div>
                   <a href="" class="tab-area-item">
                      <span class="main">集采并链</span>
                      <span class="detail">集中需求 分类整理 成本优化</span>
                   </a>
                    <div class="breakline"></div>
                   <a href="" class="tab-area-item">
                      <span class="main">快速销售   </span>
                      <span class="detail">原材料厂商、贸易商专区</span>
                   </a>
                    <div class="breakline"></div>
                   <a href="" class="tab-area-item">
                       <span class="main">关于我们   </span>
                       <span class="detail">产业互联 八大平台 三大计划</span>
                   </a>
                   </div>
               </div>
                <div class="tab-list" v-show="isShowTab">
                  <div class="tab-list-item">专业平台</div>
                  <div class="tab-list-item">供求金链</div>
                  <div class="tab-list-item">联系我们</div>
               </div>
               <div class="text-header">
                   <p class="p1">CREATE THE INTERCONNECTION OF COATING INDUSTRY</p>
                   <p class="p2">金色摇篮</p>
                   <p class="p3">全面构架涂料产业智联互通</p>
               </div>
        </div>
        <div class="slogan-area">
            <div class="slogan1">
                <img src="../../assets/image/supply/slogan1-bg.jpg" alt="">
                <span class="slogan1-text">买新品，买爆款，就用供求金链</span>
            </div>
            <div class="slogan2">
                <img src="@/assets/image/supply/slogan2-bg.jpg" alt="">
                <div class="slogan-text">
                    <div class="slogan2-text1">环保涂料，安心生活</div>
                    <div class="slogan2-text2">致力于涂料油改水研究...</div>      
                </div>                                                                                                                                                                                                                                                                                                                                                                                    
            </div>
        </div>
        <div class="merchandise-area">
            <div class="merchandise-item"><img src="../../assets/image/supply/shop-item1.jpg" alt=""></div>
            <div class="merchandise-item"><img src="../../assets/image/supply/shop-item2.jpg" alt=""></div>
            <div class="merchandise-item"><img src="../../assets/image/supply/shop-item3.jpg" alt=""></div>
            <div class="merchandise-item"><img src="../../assets/image/supply/shop-item4.jpg" alt=""></div>
        </div>
   </div>
</template>

<script>
export default {
   name:'topArea',
   data() {
       return {
         isShowTab:false
       }
   },
  components: {},
  methods:{
    showTab(){
     this.isShowTab = !this.isShowTab;
    }
  }
}
</script>

<style scoped lang="less">
.header{
    position: relative;
    height: 4.85rem;
    overflow: hidden;
     img{
        width: 7.5rem;
        height: 4.88rem;
        position: relative;
     }
 }
.icon-area{
    position: absolute;
    top: 0.28rem;
    right: 0.44rem;
    width: 1.7rem;
    height: 0.4rem;
    display: flex;
    justify-content: space-between;
    .icon-item{
        img{
            width: 0.38rem;
            height: 0.38rem;
        }
        
    }
}
  .text-header{
       position: absolute;
       top: 1.7rem;
       left:0.83rem;
       font-size: 0.14rem;
    .p1{
      width: 5rem;
      color:#DCAE63; 
    }
    .p2,.p3{
        font-weight: 700;
        color: #FFFFFA;
    }
  }
  .tab-list{
    background-color:#161b33;
    opacity: 0.8;
    width: 1.92rem;
    height: 2.25rem;
    position: absolute;
    right: 0;
    top: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    .tab-list-item{
      text-align: center;
      
       width: 1.92rem;
        color: #cca53f;
        font-size: 0.24rem;
        transform: scale(3/4);
    }
}
.tab-area{
    width: 7.5rem;
    height: 1rem;
    position: absolute;
    bottom: 0.2rem;
    .tab-area-container{
    margin: 0 auto;
    width: 7.02rem;
    height: 1rem;
    position: relative;
    .tab-area-item{
        float: left;
        width: 1.74rem;
        height: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items:center;
        text-align: center;
        .main{
            font-size: 0.28rem;
            color: #cdd1d7;
        }
        .detail{
            width: 1.74rem;
            font-size: 0.24rem;
            transform: scale(3/4);
            color: #8f919a;
        }
    }
    .breakline{
        margin-top: 0.25rem;
        width: 0.02rem;
        height: 0.5rem;
        background-color: #fff;
        float: left;
    }
}
}
.slogan-area{
    .slogan1{
        position: relative;
        height: 0.84rem;
        width: 7.5rem;
        img{
            height: 0.84rem;
            width: 7.5rem;
        }
        .slogan1-text{
            text-align: center;
            width: 4.2rem;
            position: absolute;
            left: 50%;
            transform: translate(-50%,-50%);
            top: 50%;
            font-size: 0.3rem;
            color: #eac69c;
        }
        
    }
    .slogan2{
       height: 2.26rem;
       width: 100%;
       position: relative;
        img{
           height: 2.26rem;
           width: 100%;

        }
        .slogan-text{
            width: 2.7rem;
            height: 0.8rem;
            position: absolute;
            top: 0.6rem;
            left: 0.8rem;
            display: flex;
            flex-direction: column;
            align-items:flex-start;
            justify-content: space-between;
            .slogan2-text1{
            font-weight: 500;
            font-size: 0.28rem;
            color: #030303;

        }
        .slogan2-text2{
            font-size: 0.24rem;
            transform: scale(2/3);
            transform-origin: 0 0;
            color: #030303;
            font-weight: 500;
        }
        }
        
    }
}
.merchandise-area{
    width: 100%;
    margin-top: 0.08rem;
    height: 2.16rem;
    display: flex;
    justify-content: space-between;
    .merchandise-item{
        height: 2.16rem;
        width: 1.82rem;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
  
</style>
